<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				overflow-y:scroll;
				width: 3000px;
				height: 3000px;
			}
			.top{
				width: 13px;
				/* height: 63px; */
				text-align: center;
				position: fixed;
				top: 112px;
				right: 10px;
				font-size: 5px;
				border: 1px solid red;
				cursor: pointer;
				transform: translateY(50%);
				transition: all 0.3s;
				opacity: 0;
			}
		</style>
	</head>
	<body>
		<div class="top">
			<h6>返回顶部⬆</h6>
		</div>
		<script>
			// 获取元素
			const topelement = document.querySelector('.top');
			// 为整个页面给添加滚动事件
			window.addEventListener('scroll',function(){
				console.log(document.documentElement.scrollTop);
				const n = document.documentElement.scrollTop;
				// 判断当滚动大于等于300时候显示
				//否则就隐藏
				if(n>=300)
				{
					topelement.style.opacity=1;
				}else{
					topelement.style.opacity=0;
				}
			})
			
			topelement.addEventListener('click',function(){
				// const h6 = document.querySelector('h6');
				// h6.addEventListener('click',function(){
				// 	// 让划出距离变为零
				// 	h6.scrollTop=0;
				// })
				document.documentElement.scrollTop=0;
				
			});
		</script>
	</body>
</html>